<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>    
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>   
    <style type="text/css">
    .canvas
    {
        width:800px;
        height:600px;   
    }
    .search_div
    {    
        background-color:lightGray;    
    }
    .search_box
    {
        background:url(images/input.png) no-repeat;
        position:absolute;
        height:22px;
        width:202px; 
        z-index:1000;
        display:none;
    }
    .search_input
    {
        position:absolute;
        width:155px;
        height:12px;
        line-height:12px;
        top:3px;
        left:25px; 
        margin:0px;
        border:none;
    }
    .search_images
    {
        width:17px;
        height:12px;
        left:6px;
        position:absolute;  
        top:4px;  
    }
    .left
    {
        left:6px;
    }
    .right
    {
        left:184px;
        width:11px;
        height:11px;
        top:5px;
    }
    .map_search_box
    {
        left:100px;
        top:20px;
        display:block;
    }
    </style>
</head>
<body>
    <div>           
        <div class="to_search_box" style="display:none">
            <div class="search_box">
                <img  src="images/loupe_single.png" class="search_images left" alt="search"/>
                <img  src="images/cancel.png" class="search_images search_cancel right" alt="cancel"/>
                <input type="text" class="search_input"/>
            </div>
        </div>
        <div class="canvas"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var src = ("http://ditu.google.com/maps/ms?ie=UTF8&hl=zh-CN&brcurrent=3,0x31508e64e5c642c1:0x951daa7c349f366f,0%3B5,0,0&msa=0&msid=212800177725253189507.0004a07859593181e6f23&ll=38.08269,98.481445&spn=13.995455,33.815918&z=6&output=kml");
            var queryString = "ie=UTF8&hl=zh-CN&brcurrent=3,0x31508e64e5c642c1:0x951daa7c349f366f,0%3B5,0,0&msa=0&msid=212800177725253189507.0004a07859593181e6f23&ll=38.08269,98.481445&spn=13.995455,33.815918&z=6&output=kml";
            var url = "request.php?" + queryString;
            var mapToolkit = new MyMapToolsKit({
                mapCanvas: ".canvas",
                mapOptions: {
                    zoom: 4,
                    center: new google.maps.LatLng(38.08269, 98.481445),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true
                },
                mapSearchBoxOptions: {
                    clone: ".search_box",
                    className: "map_search_box",
                    searchInput: ".search_input",
                    searchCancel: ".search_cancel"
                }
            });
            jQuery.get(url, "", function (data) {
                //$(".content").text($(data).text());
                mapToolkit.initialize(data);
            }); 
        })

        function MyMapToolsKit(options) {
            this._options = {
                mapCanvas: $(options.mapCanvas),
                mapOptions: options.mapOptions,
                mapSearchBoxOptions: options.mapSearchBoxOptions
            };
            var mapCanvas = this._options.mapCanvas;
            var mapCanvasPosition = mapCanvas.position();
            this._map = null;
            this._map = new google.maps.Map(mapCanvas.get(0), this._options.mapOptions);

            var searchBoxOptions = this._options.mapSearchBoxOptions;
            this._mapSearchBox = $(searchBoxOptions.clone).clone().appendTo(mapCanvas).addClass(searchBoxOptions.className);

            var mapToolkit = this;
            this._mapSearchBox.find(searchBoxOptions.searchInput).keydown(function (e) {
                var keyCode = e.keyCode;
                if (keyCode == 13) {
                    mapToolkit.search($(this).attr('value'));
                    return false;
                }
            });
            var searchbox = this._mapSearchBox;
            this._mapSearchBox.find(searchBoxOptions.searchCancel).click(function () {
                searchbox.find(searchBoxOptions.searchInput).attr('value', '');
                mapToolkit.search('');
            });
        }
        MyMapToolsKit.prototype.initialize = function (data) {
            this._data = data;
            this._markers = [];
            var styles = $(data).find("Style");
            var placemarks = $(data).find("Placemark");
            this.renderKml(placemarks, styles);
        }
        MyMapToolsKit.prototype.search = function (params) { 
            console.log(params);
            var allStyles = $(this._data).find("Style");
            var allPlacemarks = $(this._data).find("Placemark");
            var styles = [];
            var placemarks = [];
            if (params.length > 0) {
                var searchType = "name";
                if (searchType == "name") {
                    allPlacemarks.each(function (i, n) {
                        var name = $(n).find("name").text().toLowerCase(); 
                        console.log(name)
                        if (name.indexOf(params.toLowerCase()) >= 0) {
                            placemarks.push(allPlacemarks[i]);
                            styles.push(allStyles[i]);
                        }
                    });
                }
                this.renderKml($(placemarks), $(styles));
            } else {
                this.renderKml(allPlacemarks, allStyles);
            }
        }
        MyMapToolsKit.prototype.renderKml = function (placemarks, styles) {
            this.clearMarkers();
            var map = this._map;
            var markers = this._markers;
            placemarks.each(function (i, n) {
                var iconHref = $(styles.get(i)).find("IconStyle>Icon>href");
                var coords = $(n).find("Point>coordinates");
                var coordinfos = coords.text().split(",");
                var position = new google.maps.LatLng(coordinfos[1], coordinfos[0]);
                var marker = new google.maps.Marker({ icon: iconHref.text(), map: map, position: position });
                markers.push(marker);
            });
        }
        MyMapToolsKit.prototype.clearMarkers = function () {
            $(this._markers).each(function (i, n) {
                n.setMap(null);
            });
            this._markers.splice(0, jQuery(this._markers).size());
        }
    </script>
</body>
</html>
